<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <button id="startBtn">开始识别</button>
    <button id="stopBtn">停止识别</button>
    <div id="result"></div>
    <script>
        const startBtn = document.getElementById('startBtn');
        const stopBtn = document.getElementById('stopBtn');
        const result = document.getElementById('result');
        let recognition = null;
        startBtn.addEventListener('click', () => {
            if (recognition) {
                recognition.stop();
            }
            recognition = new window.webkitSpeechRecognition();
            recognition.lang = 'zh-CN';
            recognition.start();
        });
        stopBtn.addEventListener('click', () => {
            if (recognition) {
                recognition.stop();
            }
        });
        recognition.addEventListener('result', (e) => {
            result.innerHTML = e.results[0][0].transcript;
        });
        recognition.addEventListener('end', () => {
            result.innerHTML += '（识别结束）';
        });
        recognition.addEventListener('error', (e) => {
            result.innerHTML += '（识别错误）';
        });
    </script>
</body>

</html>